
<!--产品详情-->

<template>
  <div class="product-detail">
    <div class="product-detail-banner">
      <img
        :src="require('../../assets/imgs/product-detail/wx-sign1.png')"
        @load="loadImg('banner-img', 1366, 350)"
        class="banner-img"
      >
    </div>
    <div @click="toggleTitle" class="product-detail-title">
      <div>2D</div>
      <div class="selected">3D</div>
    </div>
    <div class="product-detail-content">
      <div class="content-wrap" v-show="dimension == 0">
        <div class="content-buttons">
          <div class="product-detail-button">3D平面</div>
          <div class="product-detail-button">3D球体</div>
          <div class="product-detail-button">3D桶装螺旋</div>
          <div class="product-detail-button">3D立方体</div>
        </div>
        <div class="content-img">
          <el-image :src="require('../../assets/imgs/product-detail/tubbiness.png')"></el-image>
          <div class="content-img-button">
            <div>立即使用</div>
            <div>观看演示demo</div>
          </div>
        </div>
      </div>
      <div class="content-wrap" v-show="dimension == 1">
        <div @click="toggleButton" class="content-buttons">
          <div class="container">
            <div class="product-detail-button">3D平面</div>
          </div>
          <div class="container">
            <div class="product-detail-button">3D球体</div>
          </div>
          <div class="container">
            <div class="product-detail-button">3D桶装螺旋</div>
          </div>
          <div class="container">
            <div class="product-detail-button">3D立方体</div>
          </div>
        </div>
        <div class="content-img">
          <img
            :src="require('../../assets/imgs/product-detail/tubbiness.png')"
            @load="loadImg('content-img-img', 1200, 450, 1200)"
            class="content-img-img"
          >
          <div class="content-img-button">
            <div>立即使用</div>
            <div>观看演示demo</div>
          </div>
        </div>
      </div>
    </div>
    <div class="product-detail-adv">
      <img
        :src="require('../../assets/imgs/product-detail/banner-footer.png')"
        @click="goLogin"
        @load="loadImg('adv-img', 1366, 296)"
        class="adv-img"
      >
    </div>
    <login :dialogVisible="dialogVisible" :isSignIn="isSignIn" @close="closeDialog"></login>
    <div @click="close" class="login-mask" tabindex="0" v-if="showmask"></div>
  </div>
</template>

<script>
import banner_2 from '../../assets/imgs/banner_2.png';
import banner_3 from '../../assets/imgs/banner_3.png';
import { loadImg } from '../../utils/util';
import login from './login';

export default {
    name: 'productDetail',
    components: {
        login,
    },
    data() {
        return {
            src: banner_2,
            advsrc: banner_3,
            dimension: 1,
            showmask: false,
            dialogVisible: false,
            isSignIn: '',
        };
    },
    created() {},
    mounted() {
        this.loadImg = loadImg;
        this.loadImg('banner-img', 1366, 350);
        this.loadImg('adv-img', 1366, 296);
        this.loadImg('content-img-img', 1200, 450, 1200);
        window.addEventListener(
            'resize',
            () => {
                this.loadImg('banner-img', 1366, 350);
                this.loadImg('adv-img', 1366, 296);
                this.loadImg('content-img-img', 1200, 450, 1200);
            },
            false
        );
    },
    methods: {
        goLogin(a) {
            this.dialogVisible = !0;
            this.$emit('showLogin', true);
            this.isSignIn = a === 'signIn';
            this.showmask = true;
        },
        closeDialog(a) {
            this.dialogVisible = !1;
            this.showmask = false;
            this.$emit('showLogin', false);
        },
        close() {
            this.showmask = false;
        },
        toggleTitle(e) {
            let nodes = Array.from(
                document.getElementsByClassName('product-detail-title')[0]
                    .children
            );
            if (nodes.includes(e.target)) {
                for (let i = 0; i < nodes.length; i++) {
                    nodes[i].classList.remove('selected');
                }
                e.target.classList.add('selected');
                this.dimension = nodes.findIndex(item => item == e.target);
            }
        },
        toggleButton(e) {
            let nodes = Array.from(
                document.getElementsByClassName('content-buttons')[1].children
            );
            for (let i = 0; i < nodes.length; i++) {
                if (nodes.includes(e.target.parentNode)) {
                    nodes[i].children[0].classList.remove('selected');
                }
                e.target.classList.add('selected');
            }
        },
        loadImg() {},
    },
};
</script>

<style lang="scss">
.product-detail {
    .product-detail-title {
        display: flex;
        justify-content: center;
        height: 70px;
        padding-top: 20px;
        div {
            width: 140px;
            text-align: center;
            font-size: 32px;
            position: relative;
            color: #252525;
            &.selected {
                color: #ffaa00;
                border-bottom: 1px solid #d8d8d8;
                &:after {
                    content: ' ';
                    width: 50px;
                    position: absolute;
                    bottom: -2px;
                    left: 33%;
                    border-bottom: 3px solid #ffaa00;
                }
            }
        }
    }
    .product-detail-content {
        background: #fbfbfb;
        .content-wrap {
            width: 1200px;
            margin: 0 auto;
            .content-buttons {
                display: flex;
                justify-content: space-between;
                padding: 25px 0;
                .container {
                    &:nth-child(1) {
                        padding-right: 30px;
                    }
                    &:nth-child(2),
                    &:nth-child(3) {
                        padding: 0 15px;
                    }
                    &:nth-child(4) {
                        padding-left: 30px;
                    }
                    width: 25%;
                    box-sizing: border-box;
                    .product-detail-button {
                        height: 47px;
                        line-height: 47px;
                        text-align: center;
                        background: white;
                        border: 1px solid #e0e0e0;
                        &.selected {
                            border: 3px solid #1994fa;
                            color: #1994fa;
                            line-height: 43px;
                        }
                    }
                }
            }
            .content-img {
                position: relative;
                .content-img-img {
                    display: block;
                    width: 1200px;
                    height: 450px;
                }
                .content-img-button {
                    & > div {
                        position: absolute;
                        right: 12%;
                        width: 240px;
                        height: 50px;
                        line-height: 50px;
                        text-align: center;
                        border: 1px solid #1994fa;
                        border-radius: 24px;
                        color: #1994fa;
                        font-size: 28px;
                        cursor: pointer;
                        &:hover {
                            color: #fff;
                            border: 1px solid #fff;
                        }
                        &:nth-child(1) {
                            top: 33%;
                        }
                        &:nth-child(2) {
                            bottom: 33%;
                        }
                    }
                }
            }
        }
    }

    .product-detail-adv {
        img {
            height: 296px;
            display: block;
            cursor: pointer;
        }
    }
}
@media screen and (max-width: 768px) {
    .product-detail {
        .product-detail-title {
            height: 50px;
            padding-top: 15px;
            div {
                width: 140px;
                font-size: 20px;
            }
        }
        .product-detail-content {
            .content-wrap {
                width: 100%;
                .content-buttons {
                    .container {
                        &:nth-child(1) {
                            padding-right: 10px;
                        }
                        &:nth-child(2),
                        &:nth-child(3) {
                            padding: 0 5px;
                        }
                        &:nth-child(4) {
                            padding-left: 10px;
                        }
                        .product-detail-button {
                            height: 40px;
                            line-height: 40px;
                            font-size: 12px;
                            &.selected {
                                line-height: 36px;
                            }
                        }
                    }
                }
                .content-img {
                    .content-img-button {
                        & > div {
                            width: 120px;
                            height: 25px;
                            line-height: 25px;
                            border-radius: 12px;
                            font-size: 12px;
                            &:nth-child(1) {
                                top: 25%;
                            }
                            &:nth-child(2) {
                                bottom: 25%;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>